<template>
	<!-- 订单详情 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="订单详情" />
		<view class="status">订单状态：<text>{{orderInfo.status | curStatus}}</text></view>
		<!-- 商品信息 -->
		<view class="title">商品信息</view>
		<view class="goods">
			<view class="paygoods">
				<image :src="orderInfo.cover_image" class="paygoods_pic"></image>
				<view class="paygoodsinfo">
					<view class="paygoodsinfo_title">{{orderInfo.goods_name}}</view>
					<view class="paygoodsinfo_spec" v-if="orderInfo.spec!=''">已选规格：{{orderInfo.spec}}</view>
					<view class="paygoodsinfo_price" v-if="!orderInfo.point_price || Number(orderInfo.point_price)<=0">
						<text>￥{{orderInfo.goods_price}}</text>
						<text style="font-size: 24rpx;">x{{orderInfo.goods_num}}</text>
					</view>
					<view class="paygoodsinfo_integral" v-else>
						<view class="integrals">
							<view class="integral">
								<image src="/static/images/mall/integralicon.png"></image>
								{{orderInfo.point_price}}
							</view>
							<text v-if="Number(orderInfo.goods_price)>0" class="add">+</text>
							<view class="price" v-if="Number(orderInfo.goods_price)>0">￥{{orderInfo.goods_price}}</view>
						</view>
						<text style="font-size: 24rpx;">x{{orderInfo.goods_num}}</text>
					</view>
				</view>
			</view>
			<view class="payinfo">
				<view class="payinfo_title">商品总金额</view>
				<text>￥{{Number(orderInfo.goods_price) * Number(orderInfo.goods_num) || 0}}</text>
			</view>
			<view class="payinfo">
				<view class="payinfo_title">运费</view>
				<text v-if="Number(orderInfo.is_freight)>0">{{orderInfo.is_freight}}</text>
				<text v-else>包邮</text>
			</view>
			<view class="payinfo" v-if="order_type==2 || order_type==3">
				<view class="payinfo_title">合计应支付</view>
				<text>￥{{(Number(orderInfo.goods_price) * Number(orderInfo.goods_num) + Number(orderInfo.is_freight)).toFixed(2)}}</text>
			</view>
			<view class="payinfo"  v-if="order_type==1 || order_type==4">
				<view class="payinfo_title">合计应支付</view>
				<text>￥{{orderInfo.price}}</text>
			</view>
			<view class="line"></view>
			<view class="payinfo" v-if="order_type==2 || order_type==3">
				<view class="payinfo_title">优惠券抵扣</view>
				<text>-￥{{orderInfo.coupon_price}}</text>
			</view>
			<view class="line" v-if="order_type==2 || order_type==3"></view>
			<view class="payinfo">
				<view class="payinfo_title">心愿币抵扣</view>
				<text>-￥{{orderInfo.fee}}</text>
			</view>
			<view class="line"></view>
			<view class="payinfo">
				<view class="payinfo_title">实际应支付</view>
				<view class="payinfo_money">￥{{orderInfo.price}}</view>
			</view>
		</view>
		<!-- 收件人信息 -->
		<view class="title">收件人信息</view>
		<view class="consignee">
			<view>
				<view class="consignee_info" @click="addConsignee">
					<view class="consignee_info_name">{{orderInfo.contact_name}}</view>
					<view class="consignee_info_phone">{{orderInfo.contact_phone}}</view>
				</view>
				<view class="consignee_address">{{orderInfo.province}}{{orderInfo.city}}{{orderInfo.district}}{{orderInfo.address}}</view>
			</view>
		</view>
		<view class="title">订单信息</view>
		<view class="orderinfo">
			<view class="ordernum">订单号码：{{orderInfo.order_num}}
				<text @click="copy">复制</text>
			</view>
			<view class="ordertime">下单时间：{{orderInfo.order_time}}</view>
			<view class="paytime" v-if="orderInfo.status==2 || orderInfo.status==3 || orderInfo.status==4 || orderInfo.status==5 || orderInfo.status==6">支付时间：{{orderInfo.pay_time}}</view>
			<view class="paytime" v-if="orderInfo.status==3 || orderInfo.status==4">发货时间：{{orderInfo.pay_time}}</view>
			<view class="paytime" v-if="orderInfo.status==4">完成时间：{{orderInfo.finish_time}}</view>
			<view class="paytime" v-if="orderInfo.status==5 || orderInfo.status==6">申请退款时间：{{orderInfo.refund_time}}</view>
			<view class="paytime" v-if="orderInfo.status==6">退款完成时间：{{orderInfo.real_refund_time}}</view>
			<view class="paytime" v-if="orderInfo.status==7">取消时间：{{orderInfo.cancel_time}}</view>
		</view>
		<view class="order_btn" v-if="order_type==2 && orderInfo.status!=5 || order_type==3 && orderInfo.status!=5">
			<view class="order_btn_cancel" v-if="orderInfo.status==1" @click="cancelOrder()">取消订单</view>
			<view class="order_btn_confirm1" v-if="orderInfo.status==1" @click="nowPay()">立即支付</view>
			<view class="order_btn_refund2" v-if="order_type==2 && orderInfo.status==2" @click="refund()">申请退款</view>
			<view class="order_btn_logistics" v-if="orderInfo.status==3" @click="viewLogistics()">查看物流</view>
			<view class="order_btn_confirm2" v-if="orderInfo.status==3" @click="confirmReceipt()">确认收货</view>
			<view class="order_btn_delete" v-if="orderInfo.status==4 || orderInfo.status==6 || orderInfo.status==7" @click="deleteOrder()">删除订单</view>
		</view>
		<view class="order_btn" v-if="order_type==1 && orderInfo.status!=2 && orderInfo.status!=5 || order_type==4 && orderInfo.status!=2 && orderInfo.status!=5">
			<view class="order_btn_cancel" v-if="orderInfo.status==1" @click="cancelOrder()">取消订单</view>
			<view class="order_btn_confirm1" v-if="orderInfo.status==1" @click="nowPay()">立即支付</view>
			<view class="order_btn_logistics" v-if="orderInfo.status==3" @click="viewLogistics()">查看物流</view>
			<view class="order_btn_confirm2" v-if="orderInfo.status==3" @click="confirmReceipt()">确认收货</view>
			<view class="order_btn_delete" v-if="orderInfo.status==4 || orderInfo.status==6 || orderInfo.status==7" @click="deleteOrder()">删除订单</view>
		</view>
		<view class="title" v-if="orderInfo.status==5 || orderInfo.status==6">退款信息</view>
		<view class="refundinfo" v-if="orderInfo.status==5 || orderInfo.status==6">
			退款原因：{{orderInfo.refund_method}}
		</view>
		<overlay ref="overlay" showSlot :showClose="false">
			<view class="logistics">
				<view class="logistics_close" @click="onClose">
					<image src="/static/images/mine/close.png"></image>
				</view>
				<view class="logistics_title">查看物流</view>
				<view class="logistics_company"><text>快递公司：</text>{{logisticsInfo.name}}</view>
				<view class="logistics_num"><text>快递单号：</text>{{logisticsInfo.express}}</view>
				<view class="logistics_progress">
					<view class="logistics_progress_title">物流进度：</view>
					<scroll-view scroll-y="true" style="height: 300rpx;">
						<view class="logistics_progress_main">
							<view class="logistics_progress_main_item" v-for="(item,index) in logisticsInfo.list" :key="index">
								<view class="logistics_progress_main_item_dots">
									<view class="dot"></view>
									<view class="dotline"></view>
								</view>
								<view class="logistics_progress_main_item_content">
									<view class="logistics_progress_main_item_content_text">{{item.step}}</view>
									<view class="logistics_progress_main_item_content_time">{{item.time}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</overlay>
		<overlay ref="refundframe" showSlot :showClose="false">
			<view class="refunds">
				<view class="refunds_title">申请退款</view>
				<view class="refunds_option">
					<view class="refunds_option_cur" @click="isShowoption = !isShowoption">
						<text>{{refund_method}}</text>
						<image src="/static/images/seemore.png"></image>
					</view>
					<view class="refunds_option_params" v-show="isShowoption">
						<view class="refunds_option_params_item" v-for="(params,p) in refunds_option" :key="p" @click="selectOption(params)">{{params}}</view>
					</view>
				</view>
				<textarea v-model="refund_remark_1" placeholder="填写退款说明（选填）" placeholder-style="font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #666666;"/>
				<view class="refunds_btn">
					<view class="refunds_btn_cancel" @click="cancelRefund">取消</view>
					<view class="refunds_btn_confirm" @click="confirmRefund">确定</view>
				</view>
			</view>
		</overlay>
	</view>
</template>

<script>
	import overlay from '@/components/overlay'
	export default {
		components:{
			overlay
		},
		data() {
			return {
				id:0,
				orderInfo:{},
				order_type:'' ,//订单类型 1提货 2普通 3积分 4兑换
				logisticsInfo:{},//物流信息
				isShowoption:false,//是否显示退款主因选择列表
				refunds_option:['拍错了，重新拍','已有该商品~','产品质量有问题','物流太慢了','产品与实物不一致','其他~'],//退款主因选择
				refund_method:'选择退款原因',//退款主因
				refund_remark_1:'',//退款理由
				allowTap:true//防误触
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.order_type = options.order_type;
			this.getOrderdetail();
		},
		filters: {
			curStatus(value) {
				switch(value){
					case '1':
						return '待付款'
					case '2':
						return '待发货'
					case '3':
						return '待收货'
					case '4':
						return '已完成'
					case '5':
						return '退款中'
					case '6':
						return '已退款'
					case '7':
						return '已取消'
					default:
						break
				}
			}
		},
		methods: {
			getOrderdetail(){
				this.$api.orderdetail({
					id:this.id,
					order_type:this.order_type,
				}).then(res=>{
					this.orderInfo = res;
				})
			},
			//复制订单号
			copy() {
				uni.setClipboardData({
					data:this.orderInfo.order_num,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			//取消订单
			cancelOrder(){
				uni.showModal({
					title:'温馨提示',
					content:'是否取消订单？',
					success: (res) => {
						if(res.confirm){
							if(!this.allowTap) return
							this.allowTap = false;
							setTimeout(()=>{
								this.allowTap = true;
							},3000)
							this.$api.cancelorder({
								id:this.id,
								order_type:this.order_type,
							}).then(res=>{
								uni.showToast({
									title:'已取消订单'
								})
								setTimeout(()=>{
									this.getOrderdetail();
								},1000)
							})
						}
					}
				})
			},
			//支付前
			nowPay(){
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				if(this.order_type == 2){
					//普通商品获取支付参数（金额大于0）
					this.$api.shopbuygoodsb({
						order_id:this.id
					}).then(res=>{
						console.log('普通商品支付参数',res);
						//支付
						this.goPay(this.orderInfo.pay_type,res);
					})
				}else{
					//积分商品获取支付参数（金额大于0）
					this.$api.shopbuypgoodsb({
						order_id:this.id
					}).then(res=>{
						console.log('积分商品支付参数',res);
						//支付
						this.goPay(this.orderInfo.pay_type,res);
					})
				}
			},
			//去支付
			goPay(pay_type,payInfo){
				uni.showLoading({
					title:'支付中...'
				})
				if(pay_type==2){
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('wxpay') != -1) {
								uni.requestPayment({
									provider: "wxpay", 
									orderInfo: payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										setTimeout(()=>{
											this.getOrderdetail();
										},1500)
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}else{
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('alipay') != -1) {
								uni.requestPayment({
									"provider": "alipay", 
									"orderInfo": payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										setTimeout(()=>{
											this.getOrderdetail();
										},1500)
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}
			},
			//申请退款
			refund(){
				this.$refs.refundframe.show();
			},
			//选择退款主因
			selectOption(item){
				this.refund_method = item;
				this.isShowoption = false;
			},
			//确认退款
			confirmRefund(){
				if(this.refund_method == '选择退款原因'){
					uni.showToast({
						title:'请选择退款原因',
						icon:'none'
					})
					return
				}
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				this.$api.refund({
					id:this.id,
					order_type:this.order_type,
					refund_method:this.refund_method,
					refund_remark_1:this.refund_remark_1
				}).then(res=>{
					uni.showToast({
						title:'申请退款成功'
					})
					setTimeout(()=>{
						this.refund_method = '选择退款原因';
						this.$refs.refundframe.close();
						this.getOrderdetail();
					},1000)
				})
			},
			//取消退款
			cancelRefund(){
				this.$refs.refundframe.close();
			},
			//查看物流
			viewLogistics(){
				this.$api.wuliu({
					id:this.id,
					order_type:this.order_type
				}).then(res=>{
					this.logisticsInfo = res;
					this.$refs.overlay.show();
				})
			},
			//关闭查看物流
			onClose(){
				this.$refs.overlay.close();
			},
			//确认收货
			confirmReceipt(){
				uni.showModal({
					title:'温馨提示',
					content:'是否确认收货？',
					success: (res) => {
						if(res.confirm){
							if(!this.allowTap) return
							this.allowTap = false;
							setTimeout(()=>{
								this.allowTap = true;
							},3000)
							this.$api.confirm({
								id:this.id,
								order_type:this.order_type
							}).then(res=>{
								uni.showToast({
									title:'已确认收货'
								})
								setTimeout(()=>{
									this.getOrderdetail();
								},1000)
							})
						}
					}
				})
			},
			//删除订单
			deleteOrder(){
				uni.showModal({
					title:'温馨提示',
					content:'是否删除订单？',
					success: (res) => {
						if(res.confirm){
							if(!this.allowTap) return
							this.allowTap = false;
							setTimeout(()=>{
								this.allowTap = true;
							},3000)
							this.$api.delorder({
								id:this.id,
								order_type:this.order_type
							}).then(res=>{
								uni.showToast({
									title:'删除订单成功'
								})
								setTimeout(()=>{
									uni.navigateBack();
								},1000)
							})
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss">
page{
	padding: calc(var(--status-bar-height) + 100rpx) 0 130rpx;
}
.status{
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #333333;
	margin: 40rpx 30rpx;
	
	text{
		font-size: 32rpx;
		color: #FF6408;
		font-weight: bold;
	}
}
.title{
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #333333;
	margin: 40rpx 0 25rpx 30rpx;
}
.goods{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 0 auto;
}
.paygoods{
	display: flex;
	
	&_pic{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	.paygoodsinfo{
		width: 500rpx;
		height: 160rpx;
		margin-left: 30rpx;
		@include column-between;
		
		&_title{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			@include one;
		}
		&_value{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			@include one;
		}
		&_spec{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			@include one;
		}
		&_price{
			@include between;
			
			text{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
		&_integral{
			@include between-end;
			
			.integrals{
				@include align-center;
			}
			.integral{
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF7000;
				@include align-center;
				
				image{
					width: 34rpx;
					height: 34rpx;
					margin-right: 18rpx;
				}
			}
			.add{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin: 0 20rpx;
			}
			.price{
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FE3E46;
			}
		}
	}
}
.payinfo{
	@include between;
	margin-top: 30rpx;
	
	text{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}
	&_text{
		@include between;
		width: 420rpx;
		
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}
		&_icon{
			@include align-center;
			
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		&_coupon{
			width: 450rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			@include between;
		}
		&_more{
			width: 12rpx;
			height: 24rpx;
		}
	}
	&_money{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FF0000;
	}
}
.line{
	width: 630rpx;
	height: 1rpx;
	background: #E5E5E5;
	margin: 30rpx auto;
}
.consignee {
	width: 690rpx;
	background-color: $white;
	border-radius: 10rpx;
	margin: 0 auto;
	padding: 30rpx;

	&_info {
		@include align-center;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		&_name {
			@include one;
		}

		&_phone {
			margin-left: 80rpx;
		}

		image {
			width: 14rpx;
			height: 25rpx;
			margin-left: 10rpx;
		}
	}

	&_address {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-top: 24rpx;
	}
}
.orderinfo{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 0 auto;
	
	.ordernum{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FF6408;
			margin-left: 30rpx;
		}
	}
	.ordertime{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 24rpx;
	}
	.paytime{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 24rpx;
	}
}
.order_btn{
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	padding: 0 30rpx;
	position: fixed;
	bottom: 0;
	z-index: 999;
	@include between;
	
	&_cancel{
		width: 280rpx;
		height: 70rpx;
		background: #FFC7A6;
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin-left: 30rpx;
	}
	&_confirm1{
		width: 280rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FF8584 0%, #FF660A 100%);
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin-left: 30rpx;
	}
	&_confirm2{
		width: 280rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FF8584 0%, #FF660A 100%);
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin-left: 30rpx;
	}
	&_refund1{
		width: 280rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FFD799 0%, #FF6563 100%);
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin-left: 30rpx;
	}
	&_refund2{
		width: 634rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FFD799 0%, #FF6563 100%);
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin-left: 30rpx;
	}
	&_logistics{
		width: 280rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FFC19E 0%, #FF186F 100%);
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin-left: 30rpx;
	}
	&_delete{
		width: 634rpx;
		height: 70rpx;
		background: #DCDCDC;
		border-radius: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin-left: 30rpx;
	}
}
.refundinfo{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
	margin:0 auto;
}
.logistics{
	width: 530rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 40rpx 44rpx;
	position: relative;
	
	&_close{
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		border: 1rpx solid $main_color;
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		
		image{
			width: 17rpx;
			height: 17rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
	&_title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		text-align: center;
		
		text{
			color: #FF6408;
		}
	}
	&_company{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 40rpx;
		
		text{
			font-weight: bold;
		}
	}
	&_num{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 17rpx;
		
		text{
			font-weight: bold;
		}
	}
	&_progress{
		margin-top: 50rpx;
		
		&_title{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}
		&_main{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			
			&_item{
				margin-bottom: 20rpx;
				display: flex;
				align-items: flex-start;
				
				&:last-child .dotline{
					display: none;
				}
				
				&_dots{
					
					.dot{
						width: 16rpx;
						height: 16rpx;
						background: #FF6408;
						border-radius: 50%;
						margin-top: 10rpx;
						position: relative;
					}
					.dotline{
						width: 4rpx;
						height: 140rpx;
						background: #FF6408;
						position: absolute;
						left: 8rpx;
						transform: translateX(-50%);
					}
				}
				&_content{
					width: 400rpx;
					margin-left: 9rpx;
					
					&_text{
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						display:-webkit-box; 
						-webkit-box-orient:vertical; 
						-webkit-line-clamp:3;
					}
					&_time{
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						@include one;
					}
				}
			}
		}
	}
}
.refunds{
	width: 530rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 37rpx 35rpx 114rpx;
	
	&_title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	&_option{
		margin-top: 35rpx;
		position: relative;
		
		&_cur{
			width: 460rpx;
			height: 60rpx;
			background: #FFFFFF;
			border: 1rpx solid #EEEEEE;
			border-radius: 10rpx;
			padding: 18rpx 16rpx;
			@include between;
			
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}
			image{
				width: 24rpx;
				height: 24rpx;
			}
		}
		&_params{
			width: 460rpx;
			background: #FFFFFF;
			border: 1rpx solid #333333;
			position: absolute;
			top: 62rpx;
			left: 0;
			z-index: 99;
			
			&_item{
				padding: 9rpx 16rpx 0;
				
				&:first-child{
					padding: 18rpx 16rpx 0;
				}
				&:last-child{
					padding: 9rpx 16rpx 18rpx;
				}
			}
		}
	}
	textarea{
		width: 460rpx;
		min-height: 200rpx;
		background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		border-radius: 10rpx;
		padding: 12rpx 15rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
	&_btn{
		@include between;
		margin-top: 62rpx;
		
		&_cancel{
			width: 204rpx;
			height: 70rpx;
			background: linear-gradient(#ff9526,#ffbc54);
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
		&_confirm{
			width: 204rpx;
			height: 70rpx;
			background: linear-gradient(#ff1401,#ff9224);
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
	}
}
</style>